<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/01.css">
</head>

<body>
    <!-- <div>
        <h1>表单</h1>
        <br>
    <hr>
    <form class="f1">
        <br>
    <label>姓名<input type="text"></label><br>
    <label>联系电话<input type="text"></label> <br>
    <label>学历<input type="text"></label><br>
    <label>年龄<input type="text"></label><br>
    <label>期望薪资<input type="text"></label><br>
    <button>保存</button>
    <button>重置</button>
    </form>
 
    </div> -->


    <div class="add">
        <p style="color: pink; font-size: 25px;">
        <h1>表单</h1>
        </p>
        <hr>
        姓名: <input type="text" name="name"><br>
        电话: <input type="text" name="photo"><br>
        学历: <input type="text" name="edu"><br>
        年龄: <input type="text" name="age"><br>
        薪资: <input type="text" name="money"><br>

        <button>保存</button>
        <button type="reset">重置</button>
    </div>
    <hr>

    <table>

        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>薪资</td>
                <td>删除</td>
                <td>修改</td>
            </tr>
        </thead>
        <tbody></tbody>

    </table>

    <div class="change">
        <div>
            姓名: <input type="text" name="name"><br>
            电话: <input type="text" name="photo"><br>
            学历: <input type="text" name="edu"><br>
            年龄: <input type="text" name="age"><br>
            薪资: <input type="text" name="money"><br>

            <button>确定</button>
            <button>取消</button>
        </div>
    </div>

    <script>
        // 根据数组动态生成页面
        const arr = [
            {
                id: 1,
                name: 'StevenJob',
                photo: 13701345949,
                edu: '大学',
                age: 28,
                money: 20000
            },
            {
                id: 2,
                name: 'ZhuMeiLi',
                photo: 1821134545,
                edu: '硕士',
                age: 30,
                money: 30000
            },
            {
                id: 3,
                name: 'WangWu',
                photo: 13701345949,
                edu: '大学',
                age: 20,
                money: 22000
            },

            {
                id: 4,
                name: 'ZhaoLiu',
                photo: 13701345949,
                edu: '博士',
                age: 25,
                money: 25000
            },

            {
                id: 5,
                name: 'ChenXiao',
                photo: 18253848293,
                edu: '大学',
                age: 20,
                money: 15000
            },
        ];

        //  获取标签对象 
        const oTbody = document.querySelector('tbody');
        // 获取新增 相关 标签对象
        const oAdd = document.querySelector('.add');

        //确定
        const oBtnEnsure = oAdd.querySelectorAll('button')[0];
        //重置
        const oBtnReset = oAdd.querySelectorAll('button')[1];
        // 姓名
        const oIptName = oAdd.querySelector('[name="name"]');
        // 电话
        const oIptPhoto = oAdd.querySelector('[name="photo"]');
        // 学历
        const oIptEdu = oAdd.querySelector('[name="edu"]');
        // 年龄
        const oIptAge = oAdd.querySelector('[name="age"]');
        // 工资
        const oIptMoney = oAdd.querySelector('[name="money"]');

        // 获取修改 相关 标签对象
        const oChange = document.querySelector('.change');
        //确定
        const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
        //重置
        const oBtnResetChange = oChange.querySelectorAll('button')[1];
        // 姓名
        const oIptNameChange = oChange.querySelector('[name="name"]');
        // 电话
        const oIptPhotoChange = oChange.querySelector('[name="photo"]');
        // 学历
        const oIptEduChange = oChange.querySelector('[name="edu"]');
        // 年龄
        const oIptAgeChange = oChange.querySelector('[name="age"]');
        // 工资
        const oIptMoneyChange = oChange.querySelector('[name="money"]');


        //定义一个变量
        // 存储 修改标签 对应的索引下标 
        let index;
        // 调用函数动态渲染生成页面
        setPage();


        // 封装函数 动态渲染生成页面
        function setPage() {
            //空数组 生成 对应的 空内容
            if (arr.length === 0) {
                oTbody.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>';
                return;
            }
            let str = '';
            arr.forEach(function (item, key) {
                str += `
        <tr>
            
           <td>${item.id}</td> 
           <td>${item.name}</td> 
           <td>${item.photo}</td> 
           <td>${item.edu}</td>  
           <td>${item.age}</td> 
           <td>${item.money}</td> 
           <td><button name="del" index="${key}">删除</button></td>
           <td><button name="change" index="${key}">修改</button></td>
        </tr>
         `;
            })
            oTbody.innerHTML = str;
        }


        //新增
        // 1.给确定按钮 添加 点击事件
        oBtnEnsure.addEventListener('click', function () {

            //
            if (window.confirm('您确定要添加吗？')) {
                //获取数据
                //获取姓名
                let name = oIptName.value;
                console.log(name);
                //获取年龄 
                let age = oIptAge.value - 0;
                //获取电话
                let photo = oIptPhoto.value - 0;
                //获取学历
                let edu = oIptEdu.value;
                console.log(edu);
                //获取工资
                let money = oIptMoney.value - 0;
                console.log(money);


                //新增id 是原始数据中 最后一个单元id值 +1
                let id = arr[arr.length - 1].id + 1;
                //生成一个 对象 写入数组的末位
                arr.push({
                    id: id,
                    name: name,
                    age: age,
                    photo: photo,
                    edu: edu,
                    money: money
                })
                console.log(arr);
                //再次调用函数，动态渲染生成新的页面
                setPage();

            }
        })

        // 2.给重置按钮 添加 点击事件
        oBtnReset.addEventListener('click', function () {
            oIptName.value = '';
            oIptAge.value = '';

        })


        //    3.给<tbody>标签 添加 点击事件
        //    通过事件委托来实现项目需求

        //    删除程序
        oTbody.addEventListener('click', function (e) {

            if (e.target.getAttribute('name') === 'del') {
                // 弹出确认框，点击确定后再执行删除程序
                if (!window.confirm('您确定要删除吗?')) {
                    return;
                }

                //在数组中 点击事件删除按钮存储的索引下标 ，删除一个单元
                arr.splice(Number(e.target.getAttribute
                    ('index')), 1);
                //新数组，动态渲染生成
                setPage();

            } else if (e.target.getAttribute('name') === 'change') {
                //现在让修改的div标签出现
                oChange.style.display = 'flex';// css样式中用了弹性盒子，所以这里要用display:flex
                index = Number(e.target.getAttribute('index'));


                //
                oIptNameChange.value = arr[index].name;
                oIptAgeChange.value = arr[index].age;

            }
        })

        //修改页
        oBtnEnsureChange.addEventListener('click', function () {
            if (window.confirm('您确定要修改吗?')) {
                //获取修改标签的 数据数值
                // 获取 姓名
                let name = oIptNameChange.value;
                //获取年龄 
                let age = oIptAge.value - 0;
                //获取电话
                let photo = oIptPhoto.value - 0;
                //获取学历
                let edu = oIptEdu.value;
                console.log(edu);
                //获取工资
                let money = oIptMoney.value - 0;
                console.log(money);

               //
                arr[index].name = name;
                arr[index].age = age;
                arr[index].photo = photo;
                arr[index].edu = cedu;
                arr[index].money = money;

            //调用
            setPage();
            //修改页的隐藏
            oChange.style.display = 'none';  
            }
           
        })

            //给修改的取消按钮添加点击事件
            oBtnCancelChange.addEventListener('click', function () {
            // 让修改 页面 隐藏
            oChange.style.display = 'none';
        })


    </script>



</body>

</html>